<template>
  <div class="wrapper">
    <p class="title">用户登录</p>
    <div class="tip">{{message}}</div>
    <el-form ref="formRef" :model="user" label-width="120px">
      <el-form-item label="登录名称">
        <el-input v-model="user.username" clearable />
      </el-form-item>
      <el-form-item label="登录密码">
        <el-input v-model="user.password" type="password" placeholder="登录密码" show-password />
      </el-form-item>
    </el-form>
    <el-row justify="end">
      <el-col :span="4">
        <el-button type="primary" @click="login">登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Login' ,
  data(){
    return {
      user: {
        username: '',
        password: '',
      },
      message: '' 
    }
  },
  methods:{
    login(){
      // 调用validate方法完成数据校验
      if( this.validate() ) {
        // 使用 axios 将数据发送给后端接口
        this.axios.post( '/customer/sign/in' , this.user )
                  .then( response=>{
                    let { success , message , token } = response.data ;
                    // 如果 success 为 false 则表示登录失败
                    if( !success ) {
                      this.message = message ;
                      return;
                    }

                    // 将 JSON Web Token 保存到 sessionStorage 中
                    sessionStorage.setItem( 'token' , token );
                    // 将登录状态保存到根组件的 logged 属性中
                    this.$root.logged = true ;
                    // 编程式导航
                    this.$router.push( { name: 'home' } );
                  }).catch( error=>{
                    console.log( error );
                  });
      }
    },
    validate(){
      if( !this.user.username ){
        this.message = '登录名称不能为空' ;
        return false;
      }

      if( !this.user.password ){
        this.message = '登录密码不能为空' ;
        return false ;
      }

      this.message = '' ;

      // 应该检查登录名称和登录密码是否符合某种规则(用正则实现)

      // 应该检查用户名是否存在(调用后端接口去检查)

      return true ;
    }
  }
}
</script>

<style scoped>
.wrapper {
    background: #fff;
}
.wrapper>.title {
    text-align: center ;
}
.wrapper>.tip {
    text-align: center;
    color: red ;
}
</style>